	<template>
	<div class="homeSty">
	 <h3 class="newTitle">评论</h3>
	 <textarea placeholder="请输入评论" v-model="userComment"></textarea>
	 <mt-button type="primary" size="large" @click="reply">发表评论</mt-button>
	 <div class="commentContent">
	 <div class="comment-item" v-for="(commentItem,commentIndex) in newComment" :key="commentIndex">
	 	<div class="cmtTitle">
	 		<span>第{{commentIndex+1}}楼 用户：{{commentItem.user_name}}</span>
	 		<span>发表时间：{{commentItem.add_time|dateFormat}}</span>
	 	</div>
	 	<div class="cmtDetail">
	 		{{commentItem.content}}
		</div>
	 </div>
		
	 </div>
	 <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
	 
	 
	</div>
	</template>


	<script>
	import {Toast} from 'mint-ui'
	export default{	
	  data(){
	    return{
	      newComment:[],
	      pageIndex:1,
	      userComment:''

	    }
	  },
	  props:["id"],
	  created(){
	  this.getNewList()

	  },
	  methods:{
	     async getNewList(){
	   	const {data}=await this.$http.get(`/api/getcomments/${this.id}?pageindex=${this.pageIndex}`)
	   	if(data.status===0) {
	   		this.newComment=[...this.newComment,...data.message]
	   	}
	   },
	loadMore(){
		this.pageIndex+=1
		this.getNewList()
	},
	async reply(){
		if(this.userComment.trim().length<=0){
			Toast("请填写评论内容！")
			return
		}
		const {data}=await this.$http.post(`/api/postcomment/${this.id}`,{
			artid:this.id,
			content:this.userComment.trim()
		})
	   	if(data.status===0) {
	   		Toast("评论成功！")
	   		this.userComment=''
	   		//this.newComment.unshift()
	   		this.pageIndex=1
	   		this.newComment=[]
	   		this.getNewList()
	   	}
	}
	}
	}
	</script>

	<style lang="less" scoped>
	.homeSty{
		color:#000;
		padding: 10px;
		padding-bottom:50px;
		textarea{
		font-size:14px;
		}
		.newTitle{
			font-size: 22px;
			color:#000;
			margin:10px;
		}
		.commentContent{
		margin-top:14px;
			.comment-item{
			line-height:30px;
				.cmtTitle{
					padding:0 5px;
					font-size: 14px;
					color:#000;
					background:#c0c0c0;
					display: flex;
					justify-content:space-between;
					
					span{
						flex:1;
						align-items: center;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

				}
				.cmtDetail{
					font-size: 18px;
					color:#000;
					text-indent:2em
				}
			}
		}
		
	}

	</style>	
